<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <title>温室管理</title>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" th:href="@{/screen/css/swiper.min.css}"/>



    <link th:href="@{favicon.ico}" rel="stylesheet"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/jquery.contextMenu.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/css/skins.css}" rel="stylesheet"/>
    <link th:href="@{/dist/css/public.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css?v=3.2.0}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/msg-layer/naranja.min.css}">
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background: url(img/ifame-bg.jpg);
        }

        .ifame-main {
            width: 100%;
            height: 100%;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .ifram-btm {
            width: 80%;
            height: 100%;
            border: none;
            margin: 0;
            padding: 0;
            margin-left: 10%;
        }

        .swiper-container-horizontal > .swiper-pagination-bullets,
        .swiper-pagination-custom,
        .swiper-pagination-fraction {
            bottom: 60px;
        }

        .swiper-pagination-bullet {
            width: 50px;
            height: 5px;
            border-radius: 2px;
            background: white;
            opacity: 0.4
        }

        .my-bullet-active {
            background: white;
            opacity: 0.8
        }

        .iframe-title {
            width: 100%;
            position: absolute;
            background: linear-gradient(#215aaa, #3b91f3) no-repeat;
            height: 40px;
            line-height: 40px;
            color: #FFF;
            z-index: 999;
        }

        .iframe-title .logo {
            width: 30px;
            height: 30px;
            vertical-align: middle;
            display: inline-block;
            margin-left: 40px;
        }

        .pro-name {
            font-size: 18px;
        }

        .iframe-title .line {
            color: #4d90e1;
            display: inline-block;
            border-right: 1px solid #aac9f4;
            padding: 0px 2px 0px 2px;
            height: 15px;
            line-height: 40px;
            vertical-align: middle;
        }

        .iframe-title .pro-desc {
            font-size: 14px;
            padding-left: 3px;
        }

        .license {
            width: 100%;
            position: absolute;
            background: #2d74cc;
            height: 30px;
            line-height: 30px;
            color: #FFF;
            z-index: 999;
            bottom: 0;
            text-align: center;
            font-size: 14px;
        }

        .right-info {
            float: right;
            margin-right: 40px;
            line-height: 40px;
        }

        .right-info .clock {
            width: 15px;
            vertical-align: middle;
        }

        .right-info .user-name {
            padding-left: 10px;
            vertical-align: middle;
            min-width: 50px;
            background: none;
            color: #FFF;
            border: none;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
        }

        .right-info .drop-down {
            margin-left: 10px;
            vertical-align: middle;
        }

        .right-info a {
            color: #fff;
            margin-right: 12px;
        }
    </style>
</head>

<body th:style="'background-image: url(/img/ifame-bg.jpg)'">
<div class="ifame-main">
    <div class="iframe-title">
        <img class="logo" th:src="@{/screen/img/logo.png}">
        <span class="pro-name">北京市巨山农场农业信息化管理平台</span>
        <span class="line"></span>
        <span class="pro-desc">温室</span>
        <div class="right-info">
            <a title="首页"><i class="fa fa-home"></i> 首页</a>
            <a title="我的工作"><i class="fa fa-legal"></i> 我的工作</a>
            <a title="全屏显示" id="fullScreen"><i class="fa fa-arrows-alt"></i> 全屏显示</a>
            <a id="msg" onclick="tomsg()"><span id="msgNum" class="ii"></span> <i class="fa fa-commenting"></i></a>


            <!--<img class="clock" th:src="@{/screen/img/clock.png}">
            <select id="user-select" class="user-name">
                <option value="ADMIN2">退出</option>
            </select>
            <img class="drop-down" th:src="@{/screen/img/dropdown.png}">-->
            <a>菜一班-张某某</a>
            <a th:href="@{/logout}" title="退出登录"><i class="fa fa-outdent"></i> 退出登录</a>
        </div>
    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <iframe class="ifram-btm"  th:src="@{/system/ncOuputCf/caifang/1}"></iframe>
            </div>
            <div class="swiper-slide">
                <iframe class="ifram-btm"  th:src="@{/system/ncOrderCf/caifang/order/1}"></iframe>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <div class="license">
        ©Copyright (c) [[${copyrightYear}]] 北京市巨山农场农业信息化管理平台
    </div>
</div>
<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
<script th:src="@{/js/jquery.contextMenu.min.js}"></script>
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<!--<script src="http://tajs.qq.com/stats?sId=62048022"></script>-->
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/index.js}"></script>
<script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
<script th:src="@{/webjars/sockjs-client/1.0.2/sockjs.min.js}"></script>
<script th:src="@{/webjars/stomp-websocket/2.3.3/stomp.min.js}"></script>
<script th:src="@{/msg-layer/naranja.js}"></script>

<script th:src="@{/screen/js/swiper.min.js}" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    $("#user-select").change(function () {
        console.log($(this).children('option:selected').val())
    })
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项

        autoplay: {
            delay: 6000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            bulletActiveClass: 'my-bullet-active',
            clickable: true,
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    })
</script>

<script th:inline="javascript">
    var ctx = [[@{
        /}]];
        /*消息角标*/
        $(function () {

            $.ajax({
                type: "GET",
                url: ctx + 'system/getMsgCount',
                dataType: "json",
                success: function (data) {
                    if (data == 0) {
                        $("#msgNum").hide();
                    }
                    $("#msgNum").text(data)
                }

            })
        })
        // 全屏显示
        $('#fullScreen').on('click', function () {
            $(document).toggleFullScreen();
        });


</script>
</body>
</html>
